<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>消息发送</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            width: 80%;
            margin: 20px auto;
        }
        .textarea {
            width: 100%;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
	    .textarea.received {
	        background-color: #f5f5f5;
	        min-height: 300px;  /* 增加高度 */
	        max-height: 500px;  /* 限制最大高度 */
	        resize: vertical;
	        overflow-y: auto;   /* 显示垂直滚动条 */
	        font-family: monospace;  /* 使用等宽字体 */
	        white-space: pre-wrap;   /* 保留换行和空格 */
	        line-height: 1.5;        /* 增加行间距 */
	    }
        .send {
            background-color: #fff;
            min-height: 100px;
            resize: vertical;
        }
        .btn-send {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-send:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>微信消息对话</h3>
        
        <!-- 接收消息区域 -->
        <textarea class="textarea received" id="receivedMsg" readonly>
            [[${receivedMsg}]]
        </textarea>
        
        <!-- 发送消息区域 -->
        <textarea class="textarea send" id="sendMsg" 
            placeholder="请输入要发送的消息..."></textarea>
        
        <button class="btn-send" onclick="sendMessage()">发送</button>
        <button class="btn-send" onclick="overMessage()">结束会话</button>
    </div>

    <script th:inline="javascript">
		var ws;
	    
	    function connectWebSocket() {
	        // 建立 WebSocket 连接
	        ws = new WebSocket('ws://' + window.location.host + '/websocket');
	        
	        // 接收消息
	        ws.onmessage = function(event) {
			    try {
			        // 解析消息
			        var data = JSON.parse(event.data);
			        if (data.msg_list && data.msg_list.length > 0) {
			            // 按时间排序（从早到晚）
			            data.msg_list.sort((a, b) => a.send_time - b.send_time);
			            
			            var messages = [];
			            data.msg_list.forEach(function(msg) {
			                // 处理不同类型的消息
			                if (msg.msgtype === 'text') {
			                    // 转换时间戳为可读格式
			                    var time = new Date(msg.send_time * 1000).toLocaleString();
			                    // 判断消息来源
			                    var source = msg.origin === 3 ? "用户" : "客服";
			                    // 组装消息文本
			                    messages.push(`[${time}] ${source}: ${msg.text.content}`);
			                } else if (msg.msgtype === 'event') {
			                    var time = new Date(msg.send_time * 1000).toLocaleString();
			                    if (msg.event.event_type === 'enter_session') {
			                        messages.push(`[${time}] 系统: 用户进入会话`);
			                    }
			                    // 可以添加其他事件类型的处理
			                }
			            });
			            
			            // 更新文本框内容
			            var textarea = $('#receivedMsg');
			            // 如果文本框为空，直接设置内容
			            if (!textarea.val().trim()) {
			                textarea.val(messages.join('\n'));
			            } else {
			                // 如果已有内容，追加新消息
			                textarea.val(textarea.val() + '\n' + messages.join('\n'));
			            }
			            
			            // 滚动到底部
			            textarea.scrollTop(textarea[0].scrollHeight);
			        }
			    } catch (e) {
			        console.error('解析消息失败:', e);
			    }
			};
	        
	        ws.onclose = function() {
	            // 连接关闭后重连
	            setTimeout(connectWebSocket, 1000);
	        };
	        
	        ws.onerror = function() {
	            ws.close();
	        };
	    }
	    
	    // 页面加载完成后连接 WebSocket
	    $(document).ready(function() {
	        connectWebSocket();
	    });
    
        function sendMessage() {
            var message = $('#sendMsg').val();
            if (!message) {
                alert('请输入要发送的消息');
                return;
            }
            
            $.ajax({
                url: '/send',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    message: message
                }),
                success: function(response) {
                    if (response.code == 200) {
                        alert('发送成功：' + response.msg);
                        $('#sendMsg').val(''); // 清空发送框

                        // 发送成功后，将消息追加到文本框
                        var time = new Date().toLocaleString();
                        var newMessage = `[${time}] 客服: ${message}`;
                        
                        var textarea = $('#receivedMsg');
                        if (!textarea.val().trim()) {
                            textarea.val(newMessage);
                        } else {
                            textarea.val(textarea.val() + '\n' + newMessage);
                        }
                        
                        // 滚动到底部
                        textarea.scrollTop(textarea[0].scrollHeight);
                    } else {
                        alert('发送失败: ' + response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    alert('发送失败: ' + error);
                }
            });
        }
        
        function overMessage() {
        	$.ajax({
                url: '/over',
                type: 'POST',
                contentType: 'application/json',
                success: function(response) {
                    if (response.code == 200) {
                        alert('结束会话成功：' + response.msg);
                    } else {
                        alert('结束会话失败: ' + response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    alert('结束会话失败: ' + error);
                }
            });
        }
    </script>
</body>
</html>